<template>
  <div class="question">
    <van-dropdown-menu>
      <van-dropdown-item ref="dropdown">
        <template #title>
          <div class="title">
            面试宝典 <span class="city">{{ city }}</span>
          </div>
        </template>
        <van-index-bar>
          <div v-for="(value, key) in cityData" :key="key">
            <van-index-anchor :index="key" style="background-color:#eee" />
            <van-cell
              v-for="(item, index) in value"
              :key="index"
              :title="item"
              @click="cellclick(item)"
            />
          </div>
        </van-index-bar>
      </van-dropdown-item>
    </van-dropdown-menu>
    <div class="posBox">
      <div class="jobs">
        <span
          v-for="(item, index) in cityPositions[this.city]"
          :key="index"
          :class="{ active: active === index }"
          @click="jobClick(index)"
          >{{ item.name }}</span
        >
      </div>
    </div>
    <div class="queShow">
      <div class="item error">
        <i class="iconfont  myicon ierror   iconicon_mine_cuoti"></i>
        <span>常错题库</span>
      </div>
      <div class="item collect">
        <i class="iconfont  myicon icollect   iconicon_mine_tikushoucang"></i>
        <span>收藏题库</span>
      </div>
      <div class="item compony">
        <i class="iconfont  myicon icompony   iconicon_mine_qiyeshoucang"></i>
        <span>企业题库</span>
      </div>
      <div class="item answer">
        <i class="iconfont  myicon ianswer   iconicon_mine_mianjing"></i>
        <span>已答题库</span>
      </div>
      <div class="svg">
        <van-circle
          v-model="currentRate"
          :rate="rate"
          :stroke-width="80"
          layer-color="translate"
          color="red"
          size="120"
          speed="2"
        />
      </div>
      <div class="inner">
        <div class="doques">顺序刷题</div>
        <div class="data">19/126</div>
      </div>
    </div>
    <div class="bottom">
      <h1 class="record">累计收录</h1>
      <div class="count">{{ totalCount }}</div>
      <van-button color="#00b8d4" size="large" @click="toTest"
        >模拟面试</van-button
      >
    </div>
    <!-- {{ city }}{{ cityPositions[city][active].id }} -->
  </div>
</template>
<script>
import { apiGetCity } from '@/api/question'
export default {
  created () {
    this.getCity()
  },
  computed: {
    rate: function () {
      if (this.totalCount !== 0 && this.correctCount !== 0) {
        return ((this.correctCount / this.totalCount) * 100).toFixed(0)
      } else {
        return 0
      }
    }
  },
  data () {
    return {
      city: '杭州',
      //   城市数据
      cityData: {},
      //   城市热门工作
      cityPositions: {},
      active: 0,
      currentRate: 30,
      //   总刷题数
      totalCount: 0,
      // 答对题目
      correctCount: 0
      // 进度条进度
    }
  },
  methods: {
    async getCity () {
      const res = await apiGetCity()
      console.log('城市:', res)
      this.cityData = res.data.citys
      this.cityPositions = res.data.cityPositions
      this.totalCount = res.data.totalCount
      this.correctCount = this.$store.state.userInfo.correctQuestions.length
    },
    // 城市点击
    cellclick (item) {
      this.city = item
      this.$refs.dropdown.toggle()
    },
    // 工作点击
    jobClick (item) {
      this.active = item
    },
    // 模拟面试
    toTest () {
      this.$router.push(
        `/interview?type=${this.cityPositions[this.city][this.active].id}&city=${this.city}`
      )
    }
  }
}
</script>
<style lang="less" scoped>
.question {
  font-size: 12px;
  .title {
    font-size: 18px;
    .city {
      font-size: 12px;
    }
  }
  .posBox {
    overflow: scroll;
    .jobs {
      display: flex;
      margin-top: 15px;
      padding: 0 15px;
      .active {
        background-color: #00b8d4;
        color: #fff;
      }
      span {
        padding: 7px 10px;
        margin-right: 20px;
        border-radius: 20px;
        flex-shrink: 0;
        color: #999;
        background-color: #eee;
      }
    }
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .queShow {
    position: relative;
    margin-top: 50px;
    height: 200px;
    width: 100%;
    .svg {
      width: 140px;
      height: 140px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: url('../../../assets/circleBg.png');
      background-size: cover;
    }
    .inner {
      width: 100px;
      height: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: linear-gradient(45deg, #e70c40, #fb6186);
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
      .doques {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 15px;
      }
    }
    .item {
      display: flex;
      flex-direction: column;
      .myicon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background-color: red;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        color: #fff;
        margin-bottom: 10px;
      }
      .ierror {
        background: linear-gradient(45deg, #ff5151, #ff7575);
      }
      .icollect {
        background: linear-gradient(45deg, #ff5151, #ffc803);
      }
      .icompony {
        background: linear-gradient(45deg, #ff5151, #00d4e6);
      }
      .ianswer {
        background: linear-gradient(45deg, #ff5151, #21cb81);
      }
    }
    .error {
      position: absolute;
      top: 20px;
      left: 40px;
    }
    .collect {
      position: absolute;
      top: 20px;
      right: 40px;
    }
    .compony {
      position: absolute;
      bottom: 20px;
      left: 40px;
    }
    .answer {
      position: absolute;
      bottom: 20px;
      right: 40px;
    }
  }
  .bottom {
    text-align: center;
    padding: 0 15px;
    margin-top: 15px;
    .count {
      font-size: 24px;
      margin: 15px 0 30px 0;
    }
  }
}
</style>
